import React from 'react';
import { connect } from 'react-redux';
import { Button, Row, Col, Tooltip, Switch } from 'antd';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterToolNew from '../../../components/FilterTool/FilterToolNew';
import Add from './add';
import List from './list';
import CodeLabel from '../../../components/CodeLabel';

function mapStateToProps(state) {
  return {
    namelist_type: state.code.namelist_type || [],
    namelist_data_type: state.code.namelist_data_type || [],
    sync_type: state.code.sync_type || [],
  };
}

@connect(mapStateToProps)
class NameListConfig extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'nameListConfig';
    this.addComponent = Add;
    this.editComponent = Add;
    this.listsComponent = List;
    this.syncStatus = [
      { key: -1, value: '同步失败' },
      { key: 0, value: '未同步' },
      { key: 1, value: '同步完成' },
      { key: 2, value: '同步中' },
    ];
    this.openStatus = [{ key: 1, value: '启用' }, { key: 2, value: '停用' }];
  }
  componentDidMount() {}

  getSynsStatusName = (key) => {
    return this.syncStatus.find((item) => item.key === key).value;
  };

  getColumns = () => {
    return [
      {
        title: '名单名称',
        key: 'namelist_title',
        dataIndex: 'namelist_title',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('名单类型', this.props.namelist_type, 'list_type', this.refreshTableFilter, [
              'key',
              'value',
            ])}
          </>
        ),
        key: 'list_type',
        dataIndex: 'list_type',
        render: (text) => {
          const value = <CodeLabel code='namelist_type' value={text} />;
          return (
            <Tooltip title={value} placement='topLeft'>
              {value}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('数据类型', this.props.namelist_data_type, 'data_type', this.refreshTableFilter, [
              'key',
              'value',
            ])}
          </>
        ),
        key: 'data_type',
        dataIndex: 'data_type',
        render: (text) => {
          const value = <CodeLabel code='namelist_data_type' value={text} />;
          return (
            <Tooltip title={value} placement='topLeft'>
              {value}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('同步类型', this.props.sync_type, 'sync_type', this.refreshTableFilter, [
              'key',
              'value',
            ])}
          </>
        ),
        key: 'sync_type',
        dataIndex: 'sync_type',
        render: (text) => {
          const value = <CodeLabel code='sync_type' value={text} />;
          return (
            <Tooltip title={value} placement='topLeft'>
              {value}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('同步状态', this.syncStatus, 'sync_status', this.refreshTableFilter, ['key', 'value'])}
          </>
        ),
        key: 'sync_status',
        dataIndex: 'sync_status',
        render: (text) => {
          const value = this.getSynsStatusName(text);
          return (
            <Tooltip title={value} placement='topLeft'>
              {value}
            </Tooltip>
          );
        },
      },
      {
        title: '最近一次同步时间',
        key: 'sync_time',
        dataIndex: 'sync_time',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: <>{this.getFilterTitle('状态', this.openStatus, 'status', this.refreshTableFilter, ['key', 'value'])}</>,
        key: 'status',
        dataIndex: 'status',
        render: (text) => {
          return <Switch checked={text === 1} disabled />;
        },
      },
      {
        title: '同步文件名称',
        key: 'sync_file_name',
        dataIndex: 'sync_file_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入名单名称|同步文件名称进行搜索',
      },
    ];
    return (
      <div>
        <FilterToolNew
          ref='filterTool'
          data={data}
          colNum={1}
          query={this.freshQueryList}
          refreshFilter={this.refreshFilter}
          isOnChange={true}
          refresh={this.resetList}
          justify='end'
          // columns={this.getColumns()}
        />
        <div className='inner-content'>
          <Row type='flex' justify='space-between' align='middle'>
            <Col span={6}>
              <Button type='primary' onClick={this.add.bind(this, { title: '添加同步任务' })}>
                添加同步任务
              </Button>
            </Col>
            <Col span={18} />
          </Row>
          <div style={{ marginTop: '10px' }}>
            <ListsComponent
              {...this.state}
              {...this.props}
              edit={this.edit}
              onChangePagination={this.onChangePagination}
              columns={this.getColumns()}
              queryList={this.freshQueryList}
              rowKey='namelist_config_id'
            />
          </div>
        </div>
      </div>
    );
  }
}

export default NameListConfig;
